.tree {
    cursor: default;
    user-select: none;
    .item {
        position: relative;
    }
    .row {
        display: flex;
        padding: 4px;
        justify-content: flex-start;
        align-items: center;
        border-bottom: solid 1px #f0f0f0;
        position: relative;
        transition: all 300ms;
        &:hover{
            background: #f0f0f0;
        }
        &.active{
            background: #e1e1e1;
        }
        .icon {
            width: 12px;
            height: 12px;
            border-radius: 4px;
            border: solid 1px #c0c0c0;
            margin-right: 10px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            &:hover{
                border-color: #b9835f;
            }
            &.selected {
                &::after {
                    content: "";
                    display: block;
                    width: 6px;
                    height: 6px;
                    background: #ff0000;
                }
            }
        }
        .tip {
            color: #999;
            font-size: 12px;
            // border: solid 1px #ff0000;
            flex: 1;
            width: 0;
            text-wrap: nowrap;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}

.oc {
    width: 12px;
    height: 12px;
    background: url("./arrow.png") no-repeat center;
    background-size: contain;
    transition: all 300ms;
    margin-left: auto;
    margin-right: 10px;
    &.expand {
        transform: rotate(180deg);
    }
}
